<!-- @file 竖屏公告入口 -->
<template>
  <div class="c-portrait-announcement-entrance">
    <div
      class="c-portrait-announcement-entrance__inner"
      @click="onShowList"
    >
      <span class="c-portrait-announcement-entrance__icon g-img-contain"></span>
      <span class="c-portrait-announcement-entrance__title">
        {{ $lang('interact.announcement.title') }}
      </span>
    </div>

    <div class="c-portrait-announcement-entrance__render">
      <iar-bulletin-bubble
        :announcement-sdk="announcementSdk"
        @show-detail="onShowDetail"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { appEvents, eventBus } from '@/app/app-events';
import { getIarComponent } from '@/components/page-watch-common/interactive-receive/load-iar-ui';
import { getWatchCore } from '@/core/watch-sdk';

const IarBulletinBubble = getIarComponent('BulletinBubble');

const watchCore = getWatchCore();
/** 公告 SDK 实例 */
const announcementSdk = watchCore.interactReceive.getAnnouncement();

function onShowList() {
  eventBus.$emit(appEvents.interaction.OpenAnnouncementList, true);
}

function onShowDetail(data: unknown) {
  eventBus.$emit(appEvents.interaction.OpenAnnouncementDetail, data);
}
</script>

<style lang="scss">
.c-portrait-announcement-entrance {
  position: relative;
}
.c-portrait-announcement-entrance__inner {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
}
.c-portrait-announcement-entrance__icon {
  width: 14px;
  height: 16px;
  margin-right: 4px;
  background-image: url(./imgs/icon-bulletin.png);
}
.c-portrait-announcement-entrance__title {
  font-size: 12px;
  color: $--color-white;
  white-space: nowrap;
}

.c-portrait-announcement-entrance__render {
  position: absolute;
  top: 36px;
  right: 0;
  .plv-iar-bulletin__top-bubble-label::before {
    left: 75%;
    margin-left: -10px;
  }
}
</style>
